<template>
	<view class='bbb'>
		<view class="box" v-for="(v,k) in booklist" :key="k" @click="goIntroduction(v)">
			<view class="box_num" v-if="k<9">{{'0'+(k+1)}}</view>
			<view class="box_num" v-else>{{k+1}}</view>
			<view class="box_img">
				<image :src="v.cover_vertical" mode="widthFix" lazy-load="true"></image>
			</view>
			<view class="content">
				<view class="shang">
					<view class="shang_content">
						{{v.name}}
					</view>
				</view>
				<view class="zhong">
					<view class="zhong_content">
						{{v.intro}}
					</view>
				</view>
				<view class="xia">
					<view class="xia_left">
						<view class="tabs">
							<text class="tab" v-for="(v,k) in v.tags" :key="k">
								{{v}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BookList",
		props: {
			booklist: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			goIntroduction(v) {
				// this.$navigateToPage(v)
				
				// tt.navigateTo({
				  // url: `/pages/novel_plugin/index?book_id=r7463373585889888552&search_keyword_id=5`,
				  
				//   url: `/pages/novel_plugin/index?book_id=r7484999506699471142&search_keyword_id=5`,
				// });
				// uni.navigateTo({
				// 	url: `/pages/Introduction/Introduction?id=${v.id}`
				// })
				uni.navigateTo({
					url: `/pages/play/index?drama_id=1&episode_index=1`
				})
			}
		},
	}
</script>
<style lang="less" scope>
.bbb {
	margin-top: -20rpx;

	.box {
		width: 100%;
		height: 258rpx;
		border-radius: 16rpx;
		margin-top: 4rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.box_num{
			margin: 0 10rpx 0 0;
			font-size: 50rpx;
			font-weight: 500;
			color:#d875ff;
		}

		.box_img {
			width: 174rpx;
			height: 222rpx;
			line-height: 258rpx;
			margin-right: 10rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

	.content {
		width: 66%;
		height: 236rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.shang {
			width: 100%;
			margin-top: 10rpx;

			.shang_content {
				font-weight: 500;
				font-size: 28rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}

			.zhong {
				width: 100%;
				margin-top: 5rpx;

			.zhong_content {
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				letter-spacing: 0.06em;
				color: #717171;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
			}

		.xia {
			width: 100%;
			font-weight: 400;
			font-size: 24rpx;
			color: #BDBDBD;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.xia_left {
				width: 100%;
				font-size: 24rpx;
				color: #666666;

				.tabs {
					width: 100%;

					.tab {
						height: 34rpx;
						border-radius: 8rpx;
						text-align: center;
						font-size: 24rpx;
						line-height: 35rpx;
						margin-right: 10rpx;
						padding: 3rpx 8rpx;
					}

							.tab:nth-child(odd) {
								background: #E0EFEF;
								color: #77A7A2;
							}

							.tab:nth-child(even) {
								background: #FFE0DD;
								color: #F38C93;
							}

						}
					}

				}
			}
		}
	}
</style>